<div class="po-info" [class.po-row]="orientation === poInfoOrientation.Horizontal && labelSize" [attr.p-size]="size">
  <div
    class="po-info-container-title"
    [ngClass]="labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + labelSize : ''"
    [class.po-info-label-horizontal]="orientation === poInfoOrientation.Horizontal"
    [class.po-text-nowrap]="orientation === poInfoOrientation.Horizontal && !labelSize"
  >
    <span class="po-info-label">
      {{ orientation === poInfoOrientation.Horizontal ? label + ':' : label }}
    </span>
  </div>

  <div
    [ngClass]="labelSize && orientation === poInfoOrientation.Horizontal ? 'po-sm-' + (12 - labelSize) : ''"
    [class.po-info-container-content]="orientation !== poInfoOrientation.Horizontal"
    [class.po-info-value-horizontal]="orientation === poInfoOrientation.Horizontal"
  >
    @if (url) {
      @if (isExternalLink) {
        <po-link [p-label]="value" [p-url]="url" [p-open-new-tab]="true"></po-link>
      } @else {
        <po-link [p-label]="value" [p-url]="url" [p-open-new-tab]="false"></po-link>
      }
    } @else {
      <span class="po-info-value">{{ value }}</span>
    }
  </div>
</div>
